<template>
	<view style="background-color: #f2f2f2;position: relative;">
		<view ref="fixedTop" style="position: fixed;top:0">
			<com-nav-bar :fixed="true" @clickLeft="back" left-icon="back" title="账户积分"></com-nav-bar>
			<view style="padding: 20rpx;background-color: #f2f2f2;">
				<u-grid :col="2">
					<u-grid-item @click="openUrl('/pages/user/integral/records?type=static_score')">
						<view>{{account.static_score.toFixed(2)}}</view>
						<view class="grid-text">永久积分</view>
					</u-grid-item>
					<u-grid-item @click="openUrl('/pages/user/integral/records?type=dynamic_score')">
						<view>{{account.dynamic_score.toFixed(2)}}</view>
						<view class="grid-text">限时积分</view>
					</u-grid-item>
				</u-grid>
			</view>
			
			<view style="padding: 20rpx;background-color: #fff;font-weight: 600;text-align: center;">发放计划列表</view>
			<u-tabs :list="tabsList" :is-scroll="false" :current="currentIndex" @change="tabChangeHandler" active-color="#FF7104" style="width:100vw;border-bottom: 1rpx solid #f2f2f2;padding-bottom: 20rpx;"></u-tabs>
		</view>
		
		<view style="background-color: #fff;padding-bottom: 100rpx;" :style="{marginTop:fixedTopHeight+'px'}">
			
			<view class="record-item" v-for="item in crontabList" :key="item.id">
				<view v-line-clamp="2" style="font-size: 13pt;">{{ item.desc }}</view>
				<view style="font-size: 10pt;color:#a9a9a9;line-height: 60rpx;">
					<view style="display: flex;justify-content: space-between;">
						<view>奖励类型：{{item.reward_type | rewardTypeFilter}}</view>
						<view>奖励数量：{{item.reward_num}}</view>
					</view>
					<view style="display: flex;justify-content: space-between;">
						<view>总轮数：{{item.period_total}}</view>
						<view>完成轮数：{{item.period_exec}}</view>
						<view>轮次间隔：{{item.period_unit | periodUnitFilter}}</view>
					</view>
					
					<view v-if="item.status == 1">预计下次发放时间：{{ formatTimeToStr(item.next_exec_at) }}</view>
				</view>
				
				<view style="margin-top: 20rpx;font-size: 10pt;color:#909399">{{ formatTimeToStr(item.created_at) }}</view>
			</view>

			<u-loadmore style="padding: 50rpx 0;" :status="loadStatus" />
		</view>
	
		<view class="exchange-btn" @click="openUrl('/pages/user/integral/rechargeCard')">积分券充值</view>
	</view>
</template>

<script>
	import {formatTimeToStr} from "@/utils/date";
	let that;
	export default {
		data(){
			return {
				tabsList:[
					{name:'生效中',value:'1'},
					{name:'已过期',value:'2'},
				],
				currentIndex:0,
				fixedTopHeight:0,
				account:{
					static_score: 0,
					dynamic_score: 0
				},
				crontabList:[],
				pagination:{
					page_count:0,
					current_page:1,
					total_count:0,
				},
				loadStatus:'nomore',
			}
		},
		beforeCreate(){
			that = this;
		},
		onShow(){
			this.$nextTick(function(){
				that.fixedTopHeight = Math.ceil(that.$refs.fixedTop.$el.clientHeight);
			})
		},
		onLoad() {
			this.getAccountData();
			this.getRewardCrontabList()
		},
		computed:{
			formatTimeToStr(){
				return value => formatTimeToStr(value * 1000,'yyyy-MM-dd hh:mm')
			},
		},
		filters:{
			rewardTypeFilter(type){
				const rewardType = {
					'static_score' : '永久积分',
					'dynamic_score' : '限时积分',
					'balance' : '兰亭余额',
					'red_packet' : '红包'
				}
				return rewardType[type] ?? '未知'
			},
			periodUnitFilter(unit){
				const periodUnitMap = {
					'1' : '天',
					'2' : '周',
					'3' : '月'
				}
				return periodUnitMap[unit] ?? '未知'
			}
		},
		methods:{
			back(){
				this.navBack()
			},
			tabChangeHandler(index){
				this.currentIndex = index;
				this.initData();
				this.getRewardCrontabList()
			},
			async getAccountData(){
				const res = await this.$http.request({
					url: this.$api.user.integral_account,
					method: 'get',
					showLoading:true,
				});
				if(res.code !== 0){
					return this.$http.toast(res.msg);
				}
				this.account = res.data;
			},
			async getRewardCrontabList(){
				this.loadStatus = 'loading';
				let status = this.tabsList[this.currentIndex].value;
				const res = await this.$http.request({
					url: this.$api.user.reward_crontab,
					method: 'get',
					data:{page:this.pagination.current_page,status},
					showLoading:true,
				});
				this.loadStatus = 'nomore';
				if(res.code !== 0){
					return this.$http.toast(res.msg);
				}
				this.crontabList = this.crontabList.concat(res.data.list);
				this.pagination = res.data.pagination;
				if (this.pagination.current_page < this.pagination.page_count) {
					this.loadStatus = 'loadmore';
				}
			},
			initData(){
				this.crontabList = [];
				this.pagination = {
					page_count:0,
					current_page:1,
					total_count:0,
				};
			},
			openUrl(url){
				uni.navigateTo({url})
			},
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh();
				this.initData();
				this.getRewardCrontabList();
			}, 1000);
		},
		onReachBottom() {
			let { current_page, page_count } = this.pagination;
			if (current_page >= page_count) {
				this.loadStatus = 'nomore';
				return;
			}
			this.pagination.current_page++;
			this.getRewardCrontabList();
		}
	}
</script>

<style lang="scss" scoped>
	.record-item{
		margin: 0 20rpx;
		padding: 20rpx 0rpx;
		border-bottom: 1rpx solid #ececec;
	}
	
	.exchange-btn{
		position: fixed;
		z-index: 10;
		bottom: 0;
		width: 100vw;
		height: 90rpx;
		background:#FF7104;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 90rpx;
		text-align: center;
		letter-spacing: 2rpx;
	}
	
</style>